<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span {
            display: inline-block;
            width: 150px;
            height: 30px;
            border: 1px solid pink;
            vertical-align: middle;
            text-align: center;
            line-height: 30px;
        }
    </style>
</head>

<body>
    抽中的选手:<span></span>
    <button>随机抽取</button>
    <script>

        let btn = document.querySelector('button')
        let span = document.querySelector('span')
        span.innerHTML = '开始抽奖吧'
        function getRandomInt(min, max) {
            min = Math.ceil(min);
            max = Math.floor(max);
            return Math.floor(Math.random() * (max - min)) + min; //不含最大值，含最小值
        }
        let arr = ['张三', '李四', '王五', '赵六', '陈启', '王八', '哈喽', '加油', '努力', '学习', '冲']
        // 事件监听
        btn.addEventListener('click', function () {
            // 生成一个随机数 作为数组的索引号
            let randomIndex = getRandomInt(0, arr.length - 1)
            //写入标签内部
            span.innerText = arr[randomIndex]
            arr.splice(randomIndex, 1)
            if (arr.length === 0) {
                btn.disabled = true
                btn.innerHTML = '已经抽完了'
            }
        })

        // 之后删除这个人的名字
        // arr.splice(从哪开始删，删几个)
        // arr.splice(randomIndex, 1)
        // console.log(arr);
    </script>
</body>

</html>